import React, { Component } from 'react'
import { Card, Button, message } from 'antd';
import Device from '../../types/Device';
import AddDeviceForComparation from './AddDeviceForComparation';
import DataCategory from '../../types/DataCategory';
import DeviceData from '../../types/DeviceData';
import Axios from 'axios';
import { queryDeviceInfo, queryCategory } from '../../requests/Device';
import { getRes } from '../../configFile';
import LiteralDataTable from './LiteralDataTable';
import TwoDComparation from './TwoDComparation'
import deviceComparationIcon from '../../static/images/设备对比.svg'

interface IProps { }
interface IState {
    modalVisible: boolean
    addedDevice: Set<Device>
    addedDeviceWithData: Set<{ device: Device, deviceDataList: DeviceData[] }>
    id_of_allCateToDisplay: Set<number>
    allCateToDisplay: Set<DataCategory>
}
export default class DeviceComparation extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            addedDeviceWithData: new Set(),
            allCateToDisplay: new Set(),
            id_of_allCateToDisplay: new Set(),
            modalVisible: false,
            addedDevice: new Set()
        }
    }
    //获取所有已选设备数据
    async getDeviceData() {
        //获取设备数据
        try {
            //清空数据类型
            this.setState({
                id_of_allCateToDisplay: new Set(),
                allCateToDisplay: new Set()
            });
            const deviceRes = (await Axios.all(Array.from(this.state.addedDevice)
                .map(item => queryDeviceInfo(item.deviceID))))
                .map(item => getRes(item))
            for (let i = 0; i < deviceRes.length; i++) {
                if (deviceRes[i].isSuccessful === false) {
                    message.error(deviceRes[i].message);
                    return;
                }
                for (let j = 0; j < deviceRes[i].data.deviceDataList.length; j++) {
                    if (!this.state.id_of_allCateToDisplay.has(deviceRes[i].data.deviceDataList[j].categoryID)) {   //所有要展示的数据类型里没有这个设备下的某一数据类型
                        this.state.id_of_allCateToDisplay.add(deviceRes[i].data.deviceDataList[j].categoryID);
                    }
                }
            }
            this.setState({ addedDeviceWithData: new Set(deviceRes.map(item => item.data)) })

            console.log("DeviceInfo:", deviceRes);
            console.log("id_of_allCateToDisplay", this.state.id_of_allCateToDisplay);

            const categoryRes = (await Axios.all(Array.from(this.state.id_of_allCateToDisplay)
                .map(item => queryCategory(item))))
                .map(item => getRes(item))

            for (let i = 0; i < categoryRes.length; i++) {
                if (categoryRes[i].isSuccessful === false) {
                    message.error(categoryRes[i].message)
                    return;
                }
                this.state.allCateToDisplay.add(categoryRes[i].data)
            }
            console.log("categoryRES", Array.from(this.state.allCateToDisplay));

        } catch (err) {
            message.error(err.toString())
        }
    }

    //设置已选择设备
    setSelectedDevices = (newAdded: Set<Device>) => {
        if (newAdded.size > 3) {
            message.warn("不能多于3个设备")
            return;
        }
        this.setState({ addedDevice: newAdded }, async () => {
            await this.getDeviceData();
            this.setState({ ...this.state })
        })
    }

    //是否展示模态框
    setModal = () => {
        this.setState({ modalVisible: !this.state.modalVisible })
    }

    render() {
        const { addedDevice, modalVisible, allCateToDisplay, addedDeviceWithData } = this.state
        const gridNum = Math.floor(24 / (addedDevice.size + 1))     //向下取整
        return (
            <div className='frameCardWrapper'>
                <Card
                    title={
                        <div className="deviceComparationTitle">
                            <img alt="加载失败" src={deviceComparationIcon} />
                            <b>设备对比</b>
                        </div>
                    }
                    extra={<Button onClick={this.setModal}
                        type="primary">
                        添加/删除对比
                        </Button>}>
                    <LiteralDataTable allCateToDisplay={allCateToDisplay} addedDeviceWithData={addedDeviceWithData} gridNum={gridNum} />
                    <TwoDComparation allCateToDisplay={allCateToDisplay} addedDeviceWithData={addedDeviceWithData} />
                </Card>
                <AddDeviceForComparation propDevices={addedDevice} setModal={this.setModal} modalVisible={modalVisible} setSelectedDevices={this.setSelectedDevices} />
            </div>

        )
    }
}
